<template>
    <div class="flx">
        <div class="page-header text-center" style="border:none">
            <h4>姓名:{{userName}}</h4>
            <h5>就诊日期:{{admDate}}</h5>
        </div>
        <ul class="nav nav-tabs" role="tablist" @click="tab" style="padding:0 3px">
            <li role="presentation" :class="this.cur==1?'active':''" ><a href="javascript:;" data-toggle="tab" data-index="1">诊断信息</a></li>
            <li role="presentation" :class="this.cur==2?'active':''"><a href="javascript:;" data-toggle="tab" data-index="2">本次缴费医嘱</a></li>
            <li role="presentation" :class="this.cur==3?'active':''"><a href="javascript:;" data-toggle="tab" data-index="3">检验信息</a></li>
            <li role="presentation" :class="this.cur==4?'active':''"><a href="javascript:;" data-toggle="tab" data-index="4">检查信息</a></li>
        </ul>
    
        <!-- Tab panes -->
        <div class="tab-content" v-if="this.cur==1">
            <div v-if="diagnosis && diagnosis.length==0">
                无内容
            </div>
            <div class="panel panel-primary" style="margin:8px" v-for="(item,index) in diagnosis" :key="index">
                <!-- Default panel contents -->
                <div class="panel-heading">{{item.DiagnosDesc}}</div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead id="th">
                        <tr>
                            <th class="text-center">日期</th>
                            <th class="text-center">结论</th>
                            <th class="text-center">状态</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr >
                            <td class="text-center">{{item.diagnosDate}}</td>
                            <td class="text-center">{{item.diagnosDesc}}</td>
                            <td class="text-center">{{item.diagnosStat}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-content" v-if="this.cur==2">
            <div v-if="advice && advice.length==0">
                无内容
            </div>
            <div class="panel panel-primary mg" v-for="(item,index) in advice" :key="index">
                <!-- Default panel contents -->
                <div class="panel-heading">{{item.arcmiDesc}}</div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead id="th">
                        <tr>
                            <th class="text-center">单价</th>
                            <th class="text-center">数量</th>
                            <th class="text-center">单位</th>
                            <th class="text-center">总额</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr >
                            <td class="text-center">{{item.price}}</td>
                            <td class="text-center">{{item.qty}}</td>
                            <td class="text-center">{{item.uom}}</td>
                            <td class="text-center">{{item.totalAmount}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel panel-primary total">
                <table class="table table-bordered">
                    <tbody> 
                        <tr >
                            <td class="text-center">&nbsp;</td>
                            <td class="text-center">&nbsp;</td>
                            <td class="text-center">合计：</td>
                            <td class="text-center">{{total}}元</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-content" v-if="this.cur==3">
            <div v-if="examine && examine.length==0">
                无内容
            </div>
            <div class="panel panel-primary" style="margin:8px" v-for="(item,index) in examine" :key="index">
                <!-- Default panel contents -->
                <div class="panel-heading">{{item.arcmiDesc}}</div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead id="th">
                        <tr>
                            <th class="text-center">单价</th>
                            <th class="text-center">数量</th>
                            <th class="text-center">单位</th>
                            <th class="text-center">总额</th>
                            <th class="text-center">结果</th>
                        
                        </tr>
                    </thead>
                    <tbody> 
                        <tr >
                            <td class="text-center">{{item.price}}</td>
                            <td class="text-center">{{item.qty}}</td>
                            <td class="text-center">{{item.uom}}</td>
                            <td class="text-center">{{item.totalAmount}}</td>
                            <td class="text-center"><button type="button" @click="checkRet" class="btn btn-default navbar-btn">结果</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-content" v-if="this.cur==4">
            <div v-if="inspect && inspect.length==0">
                无内容
            </div>
            <div class="panel panel-primary" style="margin:8px" v-for="(item,index) in inspect" :key="index">
                <!-- Default panel contents -->
                <div class="panel-heading">{{item.arcmiDesc}}</div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead id="th">
                        <tr>
                            <th class="text-center">单价</th>
                            <th class="text-center">数量</th>
                            <th class="text-center">单位</th>
                            <th class="text-center">总额</th>
                            <th class="text-center">报告</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr >
                            <td class="text-center">{{item.price}}</td>
                            <td class="text-center">{{item.qty}}</td>
                            <td class="text-center">{{item.uom}}</td>
                            <td class="text-center">{{item.totalAmount}}</td>
                            <td class="text-center"><a :href="'http://cx.lfhospital.net:8080/phone/pageList.html?patientId='+patientId+'&accessionNumber='+item.oeOrdId.replace(/\|\|/g,'-')" target="blank" class="btn btn-default navbar-btn">报告</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            cur:1,
            advice:null,
            examine:null,
            inspect:null,
            diagnosis:null,
            patientId:'',
            admDate:''
        }
    },
    computed:{
        total(){
            var sum = this.advice.reduce(function (accumulator, currentValue) {
                return accumulator + parseFloat(currentValue.totalAmount);
            }, 0);
            return sum
            
        }
    },
    created(){
        this.getDiagnosis()
        this.userName = this.$route.query.userName
        this.patientId = this.$route.query.patientId
        this.admDate = this.$route.query.admDate
    },
    methods:{
        tab(e){
            // console.log('选中的tab:',e)
            const n=e.target.dataset.index;
            this.cur=n;
            if(this.cur==1){
                this.getDiagnosis()
            }else if(this.cur==2){
                this.getAdvice();
            }else if(this.cur==3){
                this.getExamine();
            }else if(this.cur==4){
                this.getInspect()
            }
        },
        getDiagnosis(){
            var admRowId = this.$route.query.admRowid
            this.$store.commit('setLoading',true)
            this.$api.getDiagnosis(admRowId).then(res=>{
                this.$store.commit('setLoading',false)
                this.diagnosis=res.data
            })
        },
        getAdvice(){
            var admRowId = this.$route.query.admRowid
            this.$store.commit('setLoading',true)
            console.log("选中的ID:",admRowId)
            this.$api.getAdvice(admRowId).then(res=>{
                this.$store.commit('setLoading',false)
                this.advice=res.data
            })
        },
        getExamine(){
            var admRowId = this.$route.query.admRowid
            this.$store.commit('setLoading',true)
            this.$api.getExamine(admRowId).then(res=>{
                this.$store.commit('setLoading',false)
                this.examine=res.data;
            })
        },
        getInspect(){
            var admRowId = this.$route.query.admRowid
            this.$store.commit('setLoading',true)
            this.$api.getInspect(admRowId).then(res=>{
                this.$store.commit('setLoading',false)
                this.inspect=res.data
            })
        },
        checkRet(){
            this.$router.push({name:'result',query:{admDate:this.admDate}})
        }
    }
}
</script>
<style scoped>
.table{
    table-layout:fixed;word-break:break-all;
    }
.flx{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .g-tbl{
        flex: 1;
        overflow: hidden;
    }
    .pager{
        flex-shrink: 0;
    }
    .nav>li>a{
        padding:10px 5px;
    }
    .page-header{
        margin: 10px 0 0 0;
    }
    .table>tbody>tr>td{
        vertical-align: middle;
    }
    .tab-content{
        flex: 1;
        overflow: auto;
    }
    .panel.mg{
        margin: 0 8px 0 8px;
        border-radius: 0;
    }
    .panel.mg:first-child{
        margin: 8px 8px 0 8px;
        border-radius:4px 4px 0 0;
    }
    .panel.mg:not(first-child) .panel-heading{
        border-radius: 0;
    }
    .panel.total{
        border-radius: 0 0 4px 4px;
        margin: 0 8px 8px;
        background: #337ab7;
    }
     .panel.total td{
         background: #337ab7;
        color: #ffffff;
        border-color:#337ab7;;
     }
</style>